<div class="tlp-form-element">
    <label class="tlp-label" for="toggle">Text align (based on radios)</label>
    <div class="tlp-button-bar">
        <div class="tlp-button-bar-item">
            <input type="radio" id="button-bar-left" name="button-bar-radio" class="tlp-button-bar-checkbox" checked>
            <label for="button-bar-left" class="tlp-button-primary">
                <i class="fa fa-align-left tlp-button-icon"></i> Left
            </label>
        </div>
        <div class="tlp-button-bar-item">
            <input type="radio" id="button-bar-center" name="button-bar-radio" class="tlp-button-bar-checkbox">
            <label for="button-bar-center" class="tlp-button-primary">
                <i class="fa fa-align-center tlp-button-icon"></i> Center
            </label>
        </div>
        <div class="tlp-button-bar-item">
            <input type="radio" id="button-bar-right" name="button-bar-radio" class="tlp-button-bar-checkbox">
            <label for="button-bar-right" class="tlp-button-primary">
                <i class="fa fa-align-right tlp-button-icon"></i> Right
            </label>
        </div>
        <div class="tlp-button-bar-item">
            <input type="radio" id="button-bar-justify" name="button-bar-radio" class="tlp-button-bar-checkbox">
            <label for="button-bar-justify" class="tlp-button-primary">
                <i class="fa fa-align-justify tlp-button-icon"></i> Justify
            </label>
        </div>
    </div>
</div>
<br><br>
<div class="tlp-form-element">
    <label class="tlp-label">Disabled Outline button bar</label>
    <div class="tlp-button-bar">
        <div class="tlp-button-bar-item">
            <input type="radio"
                id="button-bar-disabled-sort-amount"
                name="button-bar-radio-disabled"
                class="tlp-button-bar-checkbox"
                title="Sort by amount"
                checked
                disabled
            >
            <label for="button-bar-disabled-sort-amount"
                class="tlp-button-primary tlp-button-outline disabled"
                title="Sort by amount"
            >
                <i class="fa fa-sort-amount-asc tlp-button-icon"></i>
            </label>
        </div>
        <div class="tlp-button-bar-item">
            <input type="radio"
                id="button-bar-disabled-sort-alpha"
                name="button-bar-radio-disabled"
                class="tlp-button-bar-checkbox"
                title="Sort alphabetically"
                disabled
            >
            <label for="button-bar-disabled-sort-alpha"
                class="tlp-button-primary tlp-button-outline disabled"
                title="Sort alphabetically"
            >
                <i class="fa fa-sort-alpha-asc tlp-button-icon"></i>
            </label>
        </div>
    </div>
</div>
